<template>
  <h1>watch</h1>
  <h1>1. watch监听 ref创建的基本数据：{{ num }}</h1>
  <button @click="num++">点击++</button>
  <hr>
  <h1>2. watch监听 reactive创建的引用类型数据 {{ obj.age }}</h1>
  <button @click="setAge">reactive引用类型</button>
</template>
<!-- 在script标签上 写入setup 就是 setup入口函数的语法糖  -->
<script setup>
import { ref, computed, onMounted, watch ,reactive } from 'vue'
// 1. 监听基本类型
let num = ref(0)
// watch(num, (newVal, oldVal) => {
//   console.log(newVal, oldVal);
// })
//2. ===============监听响应式基本类型的数据=========================
 const obj = reactive({
      name: "张三",
      age: 20,
      cart: {
        name: "宝马",
      },
    });
const setAge = ()=>obj.age++
// watch(obj,(newVal,oleVal)=>{
//   console.log(newVal,oleVal);
// })
// 3.  ===============一次监听多个数据=========================
watch([num,obj],(newVal,oldVal)=>{
  // newVal  [num的newVal,obj的newVal]
  // oldVal  [num的oldVal,obj的oldVal]
  console.log(newVal,oldVal);
  console.log(newVal[1].age,oldVal[1].age);
})
</script>
<!-- 再写一个script标签 使用Vue2的方法 写入name属性 -->
<script>
export default {
  name: 'App',
}
</script>
